<style scoped lang="less">
	.el-button{
		margin-left: 15px;
	}
	.el-input__wrapper{
		margin-right:15px;
	}
	.title{
		font-size: 25px;
		margin-left: 50px;
		margin-bottom: 20px;
	}
	.el-table{
		width: 100vh;
	}
	.fomeflex{
		// margin-left: 50px;
		display: flex;
		flex-wrap: wrap;
	}
	h3{
		// margin-left: 50px;
		margin-bottom:20px ;
		// margin-top: 20px;
	}
	.financescore{
		margin-left: 100px;
		margin-bottom: 20px;
		display: flex;
		p{
			font-size: 20px;
			font-weight: 800;
			text-align: center;
		}
		div{
			margin-right: 20px;
		}
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			// padding:0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	.myform{
		margin-top: 20px;
		.characters{
			display: inline-block;
			text-align: right;
			height: 30px;
			line-height: 30px;
			width: 140px;
		}
		.record{
			display: inline-block;
			padding-left: 10px;
			height: 30px;
			line-height: 30px;
		}
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 50px;
		text-align: center;
		cursor: pointer;
	}
</style>
<template>
	<div class="common-layout">
	   <el-container>
	     <el-header><Header></Header></el-header>
	     <el-main>
			<h3>财务流水</h3>
			<el-row style="margin:20px 0 30px 30px;">
				<el-col :span="6">
					  <el-statistic :value="totalCollection" title="累计收款(元)"/>
				</el-col>
				<el-col :span="6">
					  <el-statistic :value="totalRefund" title="累计退款(元)"/>
				</el-col>
				<el-col :span="6">
					  <el-statistic :value="accouts" title="累计转账(元)"/>
				</el-col>
			</el-row>
			 <div class="fomeflex">
				<el-form-item label="账单类型" label-width="90">
					<el-select v-model="form.financeBillType" style="width: 210px"  clearable placeholder="请选择">
						<el-option label="支付" :value="1" />
						<el-option label="转账" :value="2" />
					</el-select>
				</el-form-item>
			 	<el-form-item label="账单编号" label-width="90">
			 		<el-input
			 		  style="width: 210px;height: 36px;"
			 		  placeholder="请输入账单编号"
					  v-model="form.financeCode"
			 		/>
			 	</el-form-item>
			 	<div class="block">
			 		<el-form-item label="账单日期" label-width="90">
			 		<el-date-picker
			 		style="width:220px"
			 		  v-model="timevalue"
			 		  type="datetimerange"
			 		  :shortcuts="shortcuts"
			 		  range-separator="To"
			 		  start-placeholder="开始时间"
			 		  end-placeholder="结束时间"
			 		/>
			 		</el-form-item>
			 	  </div>
			 	
			 	<el-button type="primary" @click="search">搜索</el-button>
			 	<el-button plain @click="reset">重置</el-button>
			 </div>
			 <el-table :data="tableData" style="width: 100%" height="43vh">
			 	<el-table-column prop="financeCode" label="账单编号"  />
			 	<el-table-column prop="financeBillType" label="账单类型" />
			 	<el-table-column prop="finalMoney" label="账单金额" />
			 	<el-table-column prop="createTime" label="账单日期" />
			 	<el-table-column  label="操作">
			 		<template #default="record">
			 			<a class="mya" @click="detailFn(record.row)">详情</a>
			 		</template>
			 	</el-table-column>
			 </el-table>
			<el-pagination
				layout="prev,pager,next"
				:page-count="total"
				:page-size="pageSize"
				v-model:current-page="pageIndex"	
				@current-change="changePage"
			></el-pagination>
		 </el-main>
	   </el-container>
	 </div>
	 
	 <!-- 账单详情-->
	  <el-dialog
	     v-model="dialogFormVisible"
	     title="账单详情"
	     width="500"
	   >
	    <div class="myform">
	    	<div>
	    		<span class="characters">账单类型</span>
	    		<span class="record">{{formData.financeBillType}}</span>
	    	</div>
	    	<div>
	    		<span class="characters">账单金额</span>
	    		<span class="record">{{formData.finalMoney}}</span>
	    	</div>
	    	<div>
	    		<span class="characters">账单日期</span>
	    		<span class="record">{{formData.createTime}}</span>
	    	</div>
	    	<div>
	    		<span class="characters">单号</span>
	    		<span class="record">{{formData.financeCode}}</span>
	    	</div>
	    	<div>
	    		<span class="characters">账单日期</span>
	    		<span class="record">{{formData.createTime}}</span>
	    	</div>
	    	<div>
	    		<span class="characters">账单金额</span>
	    		<span class="record">{{formData.finalMoney}}</span>
	    	</div>
			<div>
				<span class="characters">说明</span>
				<span class="record"></span>
			</div>
	    
	    </div>
	     <template #footer>
	       <div class="dialog-footer">
	         <el-button type="primary" @click="dialogFormVisible=false">确定</el-button>
	       </div>
	     </template>
	   </el-dialog>
</template>
<script setup>
	import Header from '@/components/Header.vue'
	import { onMounted, ref, reactive} from 'vue';
	import {FinanceRunningList} from "@/api"
	import { ElMessage } from 'element-plus'
	let tableData = ref([])
	let total=ref(0);
	let pageIndex=ref(1);
	let pageSize=8;
	let timevalue=ref("")
	var totalCollection=ref(1);
	var totalRefund=ref(1);
	var accouts=ref(1);
	const dialogFormVisible = ref(false)
	// 财务流水列表
	const financeRunList=async ()=>{
		let res=await FinanceRunningList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:1
		})
		// console.log("财务流水列表",res)
		tableData.value=res.userList
		total.value=res.pageCount
		totalCollection.value=res.total
		totalRefund.value=res.tuikuan
		accouts.value=res.zhuanzhang
		// console.log(totalCollection)
	}
	
	// 搜索
	const formateDate = (data) => {
			let time = new Date(data)
			let year = time.getFullYear()
			let month = time.getMonth() + 1
			month=month<10 ? "0"+month : month
			let day = time.getDate()
			day=day<10 ? "0"+day : day
			let hour = time.getHours()
			hour=hour<10 ? "0"+hour : hour
			let minute = time.getMinutes()
			minute=minute<10 ? "0"+minute : minute
			let second = time.getSeconds()
			second=second<10 ? "0"+second : second
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`
		}
	let form = reactive({
		pageIndex:pageIndex,
		pageSize:pageSize,
		siteId:1,
		financeBillType:"",
		financeCode:"",
		createTimeStart:timevalue,
		createTimeEnd:"",
	})
	const search=async ()=>{
		// console.log(pageIndex.value)
		let data={}
		for(var i in form){
			if(form[i]){
				data[i]=form[i]
			}
		}
		if(data.createTimeStart){
			data.createTimeStart=formateDate(Array.from(timevalue.value)[0])
			data.createTimeEnd=formateDate(Array.from(timevalue.value)[1])
		}
		Object.assign(form,data)
		// console.log("form",form)
		let res=await FinanceRunningList(form)
		// console.log("搜索结果",res)
		tableData.value=res.userList
		total.value=res.pageCount
		// console.log("form",form)
	}
	// 重置
	const reset=()=>{
		form.financeBillType=""
		form.financeCode=""
		form.createTimeStart=""
		form.createTimeEnd=""
		financeRunList()
		// console.log("1111",form.financeBillType)
	}
	
	
	let formData=reactive(null)
	// 详情
	const detailFn=(detail)=>{
		formData=detail
		// console.log("formData",formData)
		dialogFormVisible.value=true
	}
	const changePage=(page)=>{
		pageIndex.value=page;
		// console.log(pageIndex.value)
		search()
	}
	const shortcuts = [
	  {
	    text: 'Last week',
	    value: () => {
	      const end = new Date()
	      const start = new Date()
	      start.setDate(start.getDate() - 7)
	      return [start, end]
	    },
	  }
	]
	onMounted(()=>{
		financeRunList()
		
	})
</script>
